<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
   <%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>个人信息</title>

		<link href="AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">

		<link href="css/personal.css" rel="stylesheet" type="text/css">
		<link href="css/infstyle.css" rel="stylesheet" type="text/css">
		<script src="AmazeUI-2.4.2/assets/js/jquery.min.js" type="text/javascript"></script>
		<script src="AmazeUI-2.4.2/assets/js/amazeui.js" type="text/javascript"></script>
		<script>
			//移动电话检测
			function checkCustomerCallNumber(){
				var element = document.getElementById("mobilePhone").value;
				var checkmobilePhoneinfo = $("#checkmobilePhoneinfo");
				checkmobilePhoneinfo.html("");
				var reg=/^((\(\d{2,3}\))|(\d{3}\-))?13\d{9}$/;
				if ("" == element) {
					checkmobilePhoneinfo.html("移动电话不能为空");
					document.getElementById("submit").disabled = true;
				}else if(element.length!=11){	
					checkmobilePhoneinfo.html("移动电话长度为11位");
					document.getElementById("submit").disabled = true;
				}else if(!reg.test(element)){		
					checkmobilePhoneinfo.html("移动电话格式不正确");
					document.getElementById("submit").disabled = true;			
				}else{
					document.getElementById("submit").disabled = false;	
				}
			}

			//电子邮箱检测
			function checkemail(){
				var email = document.getElementById("email").value;// dom获得email
				var checkemailinfo = $("#checkemailinfo");// jquery获得checkemailinfo节点
				checkemailinfo.html("");// 初始化span
				var reg=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

				if ("" == email) // 为空
				{
					checkemailinfo.html("电子邮箱必填");// span填充提示信息
					document.getElementById("submit").disabled = true;
				}else if(!reg.test(email)){
					checkemailinfo.html("请填写正确格式");// span填充提示信息
					document.getElementById("submit").disabled = true;
				}else{
					document.getElementById("submit").disabled = false;	
				}	
			}
	</script>
</head>
<body>
		<jsp:include page="main_top.jsp"></jsp:include>
	
		<div class="center">
			<div class="col-main">
				<aside class="menu">
				<ul>
					<li class="person">
						<a href="#">个人中心</a>
					</li>
					<li class="person">
						<ul>
							<li class="active"> <a href="CustomerInfo.jsp">个人信息</a></li>
							<li> <a href="ChangePassword.jsp">修改密码</a></li>
							<li> <a href="showOrdersByCusIdAction.action">我的订单</a></li>
						</ul>
					</li>
				</ul>

				</aside>
				<div class="main-wrap">
				
					<div class="user-info">
						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人信息</strong> / <small>Personal&nbsp;information</small></div>
						</div>
						<hr/>

						<!--头像 -->
						<div class="user-infoPic">
							<div class="filePic">
								<img class="am-circle am-img-thumbnail" src="<s:property value="#session.customer.photoUrl"/>" />
							</div>
							<div class="info-m">
								<div><b>用户名：<i><s:property value="#session.customer.customerId"/></i></b></div>
								<div class="u-level">
									<span class="rank r2">
							             <s class="vip1"></s><a class="classes" href="#">
							             <s:property value="#session.customer.theCustomerType.typeName"/></a>
						            </span>
								</div>
								<div class="u-safety">
				
								</div>
							</div>
						</div>

						<!--个人信息 -->
						<div class="info-main">
						
							<form class="am-form am-form-horizontal" action="Customer_updateCustomerInfo.action" method="post">
								<div class="am-form-group">
									<label for="user-name2" class="am-form-label">昵称</label>
									<div class="am-form-content">
										<input type="text" id="user-name2" name="customerName" value="<s:property value="#session.customer.customerName"/>">

									</div>
								</div>
								
								<div class="am-form-group">
									<label for="user-name" class="am-form-label">真实姓名</label>
									<div class="am-form-content">
										<input type="text" id="user-name2" name="realName" value="<s:property value="#session.customer.realName"/>">
									</div>
								</div>

								<div class="am-form-group">
									<label for="user-phone" class="am-form-label">移动电话</label>
									<div class="am-form-content">
										<font color="red">*<span id="checkmobilePhoneinfo"></span></font>
										<input id="mobilePhone" name="mobile" type="text" value="<s:property value="#session.customer.mobile"/>"
										onPropertyChange="checkCustomerCallNumber()" oninput="checkCustomerCallNumber()" onfocus="cleanmobileerror()"/>

									</div>
								</div>
								
								<div class="am-form-group">
									<label for="user-email" class="am-form-label">电子邮件</label>
									<div class="am-form-content">
										<font color="red">*<span id="checkemailinfo"></span></font>
										<input type="text" name="email" id="email" value="<s:property value="#session.customer.email"/>" 
										onPropertyChange="checkemail()" oninput="checkemail()" onfocus="cleanemailerror()"/>
									</div>
								</div>
								<br/>
								
								<div class="info-btn">
									<input type="submit" id="submit" value="保存修改" class="am-btn am-btn-danger" disabled="disabled" />
								</div>

							</form>
						</div>

					</div>

				</div>
				<!--底部-->
				<jsp:include page="main_foot.jsp"></jsp:include>
			</div>
		</div>
</body>
</html>